<template>
  <div>
    <nav-bar-back>
      <img
        src="../../../assets/img/navbar/ic_title_back.png"
        alt=""
        slot="left"
        class="navbar_left"
        @click="backClick"
      />
      <div slot="center">{{ title }}</div>
      <div slot="right" @click="mode = !mode" class="navbar_right">
        <img
          v-if="mode"
          src="../../../assets/img/withdrawal/ic_bind_ali_union.png"
          alt=""
        />
        <img
          v-else
          src="../../../assets/img/withdrawal/ic_bind_union_ali.png"
          alt=""
        />
      </div>
    </nav-bar-back>
    <div class="content_fixed">
      <bind-alipay v-if="mode" />
      <bind-bank-card v-else :bankList="bankList"/>
    </div>
  </div>
</template>

<script>
import NavBarBack from '@/components/common/navbar/NavBarBack.vue';
import BindAlipay from './BindAlipay.vue';
import BindBankCard from './BindBankCard.vue';
import { getBankList } from '../../../network/home';
export default {
  components: {
    NavBarBack,
    BindAlipay,
    BindBankCard,
  },
  data() {
    return {
      mode: true,
      bankList: [],
    };
  },
  created() {
    this.getBack()
  },
  methods: {
    getBack() {
      getBankList().then((res) => {
        if (res.state === 'ok') {
          console.log(res);
          this.bankList = res.data
        } else if (res.state === 'err') {
          if (res.msg === 'no_login') {
            this.$router.replace('/login');
          } else {
            this.$toast(res.msg);
          }
        }
      });
    },
    backClick() {
      this.$router.back();
    },
  },
  computed: {
    title() {
      return this.mode === true ? '绑定支付宝' : '绑定银行卡';
    },
  },
};
</script>

<style scoped>
.navbar_left {
  width: 44px;
  height: 44px;
}

.navbar_right,
.navbar_right img {
  width: 146px;
  height: 60px;
}
</style>
